import pao = require('../pao/public');
import paoClient = require('../pao/client/client');
import paoControls = require('../pao/client/controls');

/**
 * 测试视图
 */
@pao.addon("导航条布局视图", "用导航条作为菜单的布局视图，本视图支持各种导航条，支持页面切换，页面动态加载", "pao.client")
@paoClient.template("layouts/navbarLayout.html", "layouts/navbarLayout.css")
export class navbarLayoutView extends paoClient.baseControl {
    /**
     * 导航信息
     */
    navPages?: paoControls.tabPage[];
    /**
     * 标题
     */
    $title?: JQuery = undefined;
    /**
     * 导航条
     */
    $navBar?: JQuery = undefined;
    /**
     * 内容框
     */
    $content?: JQuery = undefined;

    /**
     * 更改页面
     * @param page 页面
     */
    changePage? (page: paoControls.tabPage) {
        let view : paoClient.baseControl = pao.getObject(page.view);
        this.$title.html(page.title);
        $(this.$content).children().hide();
        if(view.element) {
            $(view.element).show();
        } else {
            view.appendTo(this.$content[0]);
        }
    }

    /**
     * 绑定事件
     */
    onAfterBind? () {
        // 渲染导航页面
        if(this.navPages) {
            for(let nav of this.navPages) {
                nav.onChangeView = (page: paoControls.tabPage) =>{
                    this.changePage(page);
                };
                nav.appendTo(this.$navBar[0]);
            }
        }

        // 加载首页
        if (this.navPages && this.navPages[0]) {
            this.changePage(this.navPages[0]);
        }
    }
}